<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .2);
            text-align: center;
            font-size: 0;
            white-space: nowrap;
            overflow: auto;
        }

        .container:after {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        .dialog {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            white-space: normal;
            padding: 16px;
            background-color: white;
        }
    </style>
</head>
<!--
目前主流实现，尤其传统 PC 端页面，几乎都是根据浏览器的尺寸和弹框大小使用 JavaScript 精确计算弹框的位置。
相比传统的 JavaScript 定位，这里的方法优点非常明显。
（1）节省了很多无谓的定位的 JavaScript 代码，也不需要浏览器 resize事件之类的处理，当弹框内容动态变化的时候，也无须重新定位。
（2）性能更改、渲染速度更快，毕竟浏览器内置 CSS 的即时渲染显然比 JavaScript 的处理要更好。
（3）可以非常灵活控制垂直居中的比例，比方说设置：
.container:after {
    height: 90%;
}
此方法实现的原理关键就是两个 vertical-align:middle，前面“图片近似垂直居中”那里只图片一个元素vertical-align:middle就实现了垂直居中，
原因就是line-height大小设置得恰到好处，但是对于弹框，高度不确定，显然不能使用某个具体的行高值创建足够高的内联元素。
于是，这里借助伪元素创建了一个和外部容器一样高的宽度为 0 的 inline-block 元素。有种“幽灵空白节点”的感觉。
下面是原理作用的关键部分，在 5.3.7 节讲过如何分析多个 vertical-align 的作用，根据定义专注当前元素即可。
vertical-align:middle 定义是元素的中线和字符 x 中心点对齐。
（1）在本例中，由于 font-size 设置为 0，所以 x 中心点位置就是.container 的上边缘，此时，高度 100%的宽度为 0 的伪元素和这个中心点对齐。
如果中心点位置不动，这个伪元素上面一半的位置应该在.container 的外面，但是 CSS 中默认是左上方排列对齐的，所以，
伪元素和这个原本在容器上边缘的 x 中心点一起往下移动了半个容器高度，也就是此时 x 中心点就在容器的垂直中心线上。
（2）弹框元素.dialog 也设置了 vertical-align:middle。根据定义，弹框的垂直中心位置和 x 中心点位置对齐，
此时，x 中心点就在容器的垂直中心位置，于是.dialog 元素就和容器的垂直中心位置对齐了，从而实现了垂直居中效果。
-->

<body>
    <div class="container">
        <div class="dialog">弹窗</div>
    </div>
</body>

</html>